<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证码示例</title>
</head>
<style>
    img {
        margin-left: 10px;
    }
    .captcha-container {
        margin-top: 20px;
    }
</style>
<body>
<h1>验证码示例</h1>
<div class="captcha-container">
    ARITHMETIC类型：<img id="captchaImage" alt="验证码图片" title="点击刷新验证码" onclick="refreshCaptcha('captchaImage','ARITHMETIC')">
</div>
<div class="captcha-container">
    CHINESE类型：<img id="captchaImage2" alt="验证码图片" title="点击刷新验证码" onclick="refreshCaptcha('captchaImage2','CHINESE')">
</div>
<div class="captcha-container">
    CHINESE_GIF类型：<img id="captchaImage3" alt="验证码图片" title="点击刷新验证码" onclick="refreshCaptcha('captchaImage3','CHINESE_GIF')">
</div>
<div class="captcha-container">
    SPEC_GIF类型：<img id="captchaImage4" alt="验证码图片" title="点击刷新验证码" onclick="refreshCaptcha('captchaImage4','SPEC_GIF')">
</div>
<div class="captcha-container">
    SPEC类型：<img id="captchaImage5" alt="验证码图片" title="点击刷新验证码" onclick="refreshCaptcha('captchaImage5','SPEC')">
</div>
<div class="captcha-container">
    HUTOOL_LINE类型：<img id="captchaImage6" alt="验证码图片" title="点击刷新验证码" onclick="refreshCaptcha('captchaImage6','HUTOOL_LINE')">
</div>
<div class="captcha-container">
    HUTOOL_CIRCLE类型：<img id="captchaImage7" alt="验证码图片" title="点击刷新验证码"
         onclick="refreshCaptcha('captchaImage7','HUTOOL_CIRCLE')">
</div>
<div class="captcha-container">
    HUTOOL_SHEAR类型：<img id="captchaImage8" alt="验证码图片" title="点击刷新验证码"
         onclick="refreshCaptcha('captchaImage8','HUTOOL_SHEAR')">
</div>
<div class="captcha-container">
    HUTOOL_GIF类型：<img id="captchaImage9" alt="验证码图片" title="点击刷新验证码" onclick="refreshCaptcha('captchaImage9','HUTOOL_GIF')">
</div>

<script>
    function refreshCaptcha(id, category) {
        fetch('http://localhost:8080/captcha/get?key=123456&category=' + category)
            .then(response => response.json()) // 假设接口返回的是JSON格式的数据
            .then(data => {
                // 假设JSON数据中包含一个名为'captchaBase64'的字段，其中存储了Base64格式的图片
                document.getElementById(id).src = data.graphicImageBase64;
            })
            .catch(error => console.error('获取验证码失败:', error));
    }

    // 页面加载时自动刷新验证码
    window.onload = ()=>{
        refreshCaptcha('captchaImage','ARITHMETIC');
        refreshCaptcha('captchaImage2','CHINESE');
        refreshCaptcha('captchaImage3','CHINESE_GIF');
        refreshCaptcha('captchaImage4','SPEC_GIF');
        refreshCaptcha('captchaImage5','SPEC');
        refreshCaptcha('captchaImage6','HUTOOL_LINE');
        refreshCaptcha('captchaImage7','HUTOOL_CIRCLE');
        refreshCaptcha('captchaImage8','HUTOOL_SHEAR');
        refreshCaptcha('captchaImage9','HUTOOL_GIF');
    }
</script>
</body>
</html>
